<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>系统变量</title>
    <link th:href="@{/resources/iview/styles/iview.css}" rel="stylesheet">
    <link th:href="@{/resources/css/common.css}" rel="stylesheet">
    <style>
        .ivu-form-item {
            margin: 4px;
        }
    </style>
</head>

<body>
    <div id="app" class="layout" ref="layout" v-cloak>
        <i-row>
            <i-col span="24" style="text-align: left;padding: 1px;">
                <i-form inline>
                    <form-item>
                        <i-input type="text" v-model="generatePath" placeholder="请输入生成脚本路径">
                            <i-button slot="append" @click="generate()">生成脚本文件</i-button>
                        </i-input>
                    </form-item>
                    <form-item>
                        <i-button @click="loadTableData()" icon="ios-search">刷新</i-button>
                        <i-button type="primary" @click="add()" icon="md-add">新增</i-button>
                    </form-item>

                </i-form>
            </i-col>
        </i-row>
        <i-row>
            <i-col span="24">
                <i-table size="small" border stripe :columns="columns" :data="dataList" :height="tableHeight"></i-table>
            </i-col>
        </i-row>

        <!-- form modal-->
        <modal v-model="modal" title="编辑详情" :mask-closable="false" :loading="loading" @on-ok="save" @on-cancel="cancel"
            fullscreen>
            <div :style="{height:modalHeight}">
                <iframe ref="frameRef" :src="frameUrl" frameborder="0"></iframe>
            </div>
        </modal>

        <!-- form modal-->
        <modal v-model="modalView" title="查看详情" @on-cancel="cancel" fullscreen>
            <div :style="{height:modalHeight}">
                <iframe ref="frameViewRef" :src="frameViewUrl" frameborder="0"></iframe>
            </div>
        </modal>
    </div>


    <script type="text/javascript" th:src="@{/resources/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/resources/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/resources/iview/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/resources/iview/iview.min.js}"></script>
    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data: function () {
                return {
                    //布局信息
                    tableHeight: __Global.tableHeight(),
                    modalHeight: __Global.modalHeight(),

                    //【请求地址】，按需修改
                    listUrl: __Global.getServerUrl("/platform/script/list"),
                    deleteUrl: __Global.getServerUrl("/platform/script/delete"),
                    formUrl: __Global.getPageUrl("platform/script/form"),
                    formViewUrl: __Global.getPageUrl("platform/script/formView"),
                    generateUrl: __Global.getPageUrl("platform/script/generate"),

                    //form弹出框
                    modal: false,
                    frameUrl: "",
                    loading: true,
                    modalView: false,
                    frameViewUrl: "",

                    generatePath: "D:\\AAASpace\\Release\\20231116",

                    // 【表格以及分页属性】，按需修改
                    dataList: [],
                    columns: [{
                        fixed: "left",
                        title: '#',
                        key: 'id',
                        width: 60,
                        align: "center",
                        type: "index"
                    }, {
                        fixed: "left",
                        width: 140,
                        title: 'jiraNumber',
                        key: 'jiraNumber'
                    }, {
                        fixed: "left",
                        width: 240,
                        title: 'jiraSummary',
                        key: 'jiraSummary'
                    }, {
                        width: 120,
                        title: 'preDB6',
                        key: 'preDB6',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'preDB8',
                        key: 'preDB8',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'preDB9',
                        key: 'preDB9',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'preDB12',
                        key: 'preDB12',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'preDB13',
                        key: 'preDB13',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'preDB19',
                        key: 'preDB19',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db6',
                        key: 'db6',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db8',
                        key: 'db8',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db9',
                        key: 'db9',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db12',
                        key: 'db12',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db13',
                        key: 'db13',
                        ellipsis: true
                    }, {
                        width: 120,
                        title: 'db19',
                        key: 'db19',
                        ellipsis: true
                    }, {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        fixed: "right",
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: "info", size: 'small' },
                                    on: {
                                        click: () => {
                                            this.view(params.row.id);
                                        }
                                    }
                                }, "查看"),
                                h('Button', {
                                    props: { type: "primary", size: 'small' },
                                    on: {
                                        click: () => {
                                            this.add(params.row.id);
                                        }
                                    }
                                }, "编辑"),
                                h('Button', {
                                    props: { type: "error", size: 'small' },
                                    on: {
                                        click: () => {
                                            this.delete(params.row.id);
                                        }
                                    }
                                }, "删除")
                            ]);
                        }
                    }]
                };
            },
            mounted: function () {
                this.loadTableData();
            },
            methods: {
                //加载表格数据
                loadTableData: function () {
                    CRUDHelper(this).queryTable();
                },
                //编辑或者新增
                view: function (id) {
                    this.modalView = true;
                    this.frameViewUrl = this.formViewUrl + "&id=" + id;
                },
                //编辑或者新增
                add: function (id) {
                    this.modal = true;
                    let url = this.formUrl;
                    if (id) {
                        url += "&id=" + id;
                    }
                    this.frameUrl = url;
                },
                //保存操作，会调用子页面的保存方法
                save: function () {
                    this.loading = true;
                    __Global.getFrameVue("frameRef").save(() => {
                        this.modal = false;
                        this.frameUrl = "";
                        this.loadTableData();
                    });
                },
                //取消编辑框
                cancel: function () {
                    this.frameUrl = "";
                },
                //删除记录
                delete: function (id) {
                    CRUDHelper(this).setParams({ id: id }).delete();
                },

                generate: function () {
                    new PostMethod(this)
                        .setUrl(this.generateUrl)
                        .setParams({ generatePath: this.generatePath })
                        .request((resp) => {
                            if (resp.code == __Global.ResultType.success && resp.data) {
                                this.$Message.success("生成成功【" + resp.data + "】");
                            }
                        });
                }

            }
        });
    </script>
</body>

</html>